<template>
	<view class="screen_box">
		<view class="tab_nav">
			<nav-bar
				nav_btn="back"
				:shopId="shopId"
				ref="keywords"
				:showShare="true"
				:placeholder="placeholder"
				:record="record"
				:keyWord="keyword"
				:color="color"
				:auto_img="image"
			></nav-bar>
		</view>
		<view class="screen_jl_box flexjus">
			<view class="screen_jl_txt s28 family f500">搜索记录</view>
			<view class="empty_txt s24 family f500" @click="clear">清空记录</view>
		</view>
		<view class="record_list flex">
			<view class="list_txt s24 family f500 txtali" v-for="(item, index) in screenList" :key="index" @click="getList(item.keywords)" v-if="screenList.length != 0">
				<text v-if="item.keywords">{{ item.keywords }}</text>
			</view>
			<view class="no_data s24 family f400" v-if="screenList.length == 0">快去搜索呀！</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			image: '/pages/filePages/static/left_jian_back.png',
			color: 'black',
			placeholder: '商品名/品牌/商品种类/关键字',
			screenList: [],
			keyword: '',
			record: 1,
			shopId: 0
		};
	},
	onLoad(options) {
		this.shopId = options.shopId;
	},
	onShow() {
		this.getScreentList();
	},
	methods: {
		getScreentList() {
			let that = this;
			that
				.$request({
					url: 'Product/get_search'
				})
				.then((res) => {
					that.screenList = res.data.data;
				});
		},
		clear() {
			let that = this;
			that
				.$request({
					url: 'Product/clean_search'
				})
				.then((res) => {
					this.getScreentList();
				});
		},
		getList(keyword) {
			let that = this;
			that.getScreentList();
			that
				.$request({
					url: 'product/lists',
					method: 'POST',
					data: {
						keywords: keyword
					}
				})
				.then((res) => {
					if (res.data.code == 1) {
						that.$store.commit('getScreen', res.data.data.data);
						uni.navigateTo({
							url: '/pages/filePages/search_list/search_list?keyword=' + keyword + '&shopId=' + this.shopId
						});
					}
				});
		}
	}
};
</script>

<style scoped lang="scss">
.screen_box {
	overflow: hidden;
	.screen_jl_box {
		width: 686upx;
		height: 40upx;
		padding-left: 32upx;
		padding-right: 32upx;
		margin-top: 28upx;
		.screen_jl_box {
			color: #000;
		}
		.empty_txt {
			color: #999;
		}
	}
	.record_list {
		display: flex;
		width: 686upx;
		padding-left: 32upx;
		padding-right: 32upx;
		margin-top: 32upx;
		flex-wrap: wrap;
		.list_txt {
			height: 46upx;
			padding: 0 10rpx;
			background: #f4f4f4;
			border-radius: 23upx;
			line-height: 46upx;
			color: #666;
			margin-right: 30rpx;
			margin-bottom: 20rpx;
		}
		.no_data {
			color: #666;
			margin: 50rpx auto;
		}
	}
}
</style>
